{% block sw_settings_custom_field_set_list %}
<sw-page class="sw-settings-custom-field-set-list">
    {% block sw_settings_custom_field_set_list_search_bar %}
    <template #search-bar>
        <sw-search-bar
            initial-search-type="custom_field"
            :placeholder="$tc('sw-settings-custom-field.general.placeholderSearchBar')"
            :initial-search="term"
            @search="onSearch"
        />
    </template>
    {% endblock %}

    {% block sw_settings_custom_field_set_list_header %}
    <template #smart-bar-header>
        <h2>
            {{ $tc('sw-settings.index.title') }}
            <mt-icon
                name="regular-chevron-right-xs"
                size="12px"
            />
            {{ $tc('sw-settings-custom-field.set.list.textHeadline') }}

            <span
                v-if="!isLoading"
                class="sw-page__smart-bar-amount"
            >
                ({{ total }})
            </span>
        </h2>
    </template>
    {% endblock %}

    {% block sw_settings_custom_field_set_list_actions %}
    <template #smart-bar-actions>
        {% block sw_settings_custom_field_set_list_actions_add %}
        <mt-button
            v-tooltip.bottom="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('custom_field.creator'),
                showOnDisabledElements: true
            }"
            class="sw-settings-custom-field-set-list__button-create"
            :disabled="!acl.can('custom_field.creator') || undefined"
            variant="primary"
            size="default"
            @click="$router.push({ name: 'sw.settings.custom.field.create' })"
        >
            {{ $tc('sw-settings-custom-field.set.list.buttonAdd') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_custom_field_set_list_content %}
    <template #content>
        <sw-card-view>
            {% block sw_settings_custom_field_set_list_content_inner %}
            <mt-card
                class="sw-settings-custom-field-set-list__card"
                position-identifier="sw-settings-custom-field-set-list"
            >
                {% block sw_settings_custom_field_set_list_grid %}
                <template #grid>
                    <sw-grid
                        v-show="items.length > 0"
                        class="sw-settings-custom-field-set-list-grid"
                        :selectable="false"
                        :items="items"
                        table
                    >
                        {% block sw_settings_custom_field_set_list_grid_columns %}
                        <template
                            #columns="{ item }"
                        >

                            {% block sw_settings_custom_field_set_list_grid_column_label %}
                            <sw-grid-column
                                flex="minmax(180px, 2fr)"
                                :label="$tc('sw-settings-custom-field.set.list.columnName')"
                            >
                                <template v-if="item.global">
                                    {{ getInlineSnippet(item.config.label) || item.name }}
                                    <sw-help-text
                                        class="sw-settings-custom-field-set-list__help-text-global-set"
                                        :text="$tc('sw-settings-custom-field.set.list.helpTextGlobalSet')"
                                    />
                                </template>
                                <template v-else>
                                    <router-link
                                        :title="$tc('sw-settings-custom-field.set.list.contextMenuEdit')"
                                        class="sw-custom-field-set-list__column-name"
                                        :to="{ name: 'sw.settings.custom.field.detail', params: { id: item.id } }"
                                    >
                                        {{ getInlineSnippet(item.config.label) || item.name }}
                                    </router-link>
                                </template>
                            </sw-grid-column>
                            {% endblock %}

                            {% block sw_settings_custom_field_set_list_grid_column_actions %}
                            <sw-grid-column
                                flex="minmax(70px, 70px)"
                                align="center"
                                label=""
                            >
                                <sw-context-button>
                                    <sw-context-menu-item
                                        v-tooltip="{
                                            message: $tc('sw-settings-custom-field.set.list.helpTextGlobalSet'),
                                            showOnDisabledElements: true,
                                            disabled: !item.global
                                        }"
                                        :disabled="item.global || !acl.can('custom_field.editor') || undefined"
                                        class="sw-custom-field-set-list__edit-action"
                                        :router-link="{ name: 'sw.settings.custom.field.detail', params: { id: item.id } }"
                                    >
                                        {{ $tc('sw-settings-custom-field.set.list.contextMenuEdit') }}
                                    </sw-context-menu-item>

                                    <template v-if="!item.global">
                                        <sw-context-menu-item
                                            class="sw-settings-custom-field-set-list__delete-action"
                                            :disabled="!acl.can('custom_field.deleter') || undefined"
                                            variant="danger"
                                            @click="onDelete(item.id)"
                                        >
                                            {{ $tc('sw-settings-custom-field.set.list.buttonDelete') }}
                                        </sw-context-menu-item>
                                    </template>
                                </sw-context-button>
                            </sw-grid-column>
                            {% endblock %}

                            {% block sw_settings_custom_field_set_list_grid_delete_modal %}
                            <sw-modal
                                v-if="showDeleteModal === item.id"
                                :title="$tc('global.default.warning')"
                                variant="small"
                                @modal-close="onCloseDeleteModal"
                            >

                                {% block sw_settings_custom_field_set_list_grid_delete_modal_text %}
                                <p>
                                    {{ $tc('sw-settings-custom-field.set.list.textDeleteConfirm', { name: getInlineSnippet(item.config.label) || item.name }, 0) }}
                                </p>
                                {% endblock %}

                                {% block sw_settings_custom_field_set_list_grid_delete_modal_footer %}
                                <template #modal-footer>

                                    {% block sw_settings_custom_field_set_list_grid_delete_modal_cancel %}
                                    <mt-button
                                        size="small"
                                        variant="secondary"
                                        @click="onCloseDeleteModal"
                                    >
                                        {{ $tc('global.default.cancel') }}
                                    </mt-button>
                                    {% endblock %}

                                    {% block sw_settings_custom_field_set_list_grid_delete_modal_delete %}
                                    <mt-button
                                        variant="critical"
                                        size="small"
                                        @click="onConfirmDelete(item.id)"
                                    >
                                        {{ $tc('sw-settings-custom-field.set.list.buttonDelete') }}
                                    </mt-button>
                                    {% endblock %}
                                </template>
                                {% endblock %}
                            </sw-modal>
                            {% endblock %}
                        </template>
                        {% endblock %}

                        {% block sw_settings_custom_field_set_list_content_columns_pagination %}
                        <template #pagination>
                            <sw-pagination
                                :page="page"
                                :limit="limit"
                                :total="total"
                                :total-visible="7"
                                @page-change="onPageChange"
                            />
                        </template>
                        {% endblock %}
                    </sw-grid>
                </template>
                {% endblock %}
                {% block sw_settings_custom_fields_set_list_empty_message %}
                <sw-empty-state
                    v-if="!isLoading && items.length <= 0"
                    :absolute="false"
                    :title="$tc('sw-settings-custom-field.set.list.messageEmpty')"
                />
                {% endblock %}
            </mt-card>
            {% endblock %}
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
